import React, { Component } from 'react'


import {Route,Link} from 'react-router-dom'

//  嵌套路由 



import { TabBar } from 'antd-mobile';




import  HomeRouter from '../../router/HomeRouter'


// 2.3 实现 TabBar
// 1. 基本使用
// ① 打开 antd-mobile 组件库中 TabBar 组件的 文档。
// ② 选择 APP 型选项卡菜单，点击（</>）显示源码。
// ③ 拷贝核心代码到 Home 组件中。
// ④ 分析并调整代码，让其能够在项目中正常运行。






// 2.4 修改 TabBar 外观样式
// ① 删除前面路由的演示代码。
// ② 修改 TabBar 菜单项文字标题。
// ③ 修改 TabBar 菜单文字标题颜色（选中和未选中）。
// ④ 使用字体图标，修改TabBar 菜单的图标。
// ⑤ 修改 TabBar 菜单项的图标大小。
// ⑥ 调整 TabBar 菜单的位置，让其固定在最底部。




//  针对有很多类似的代码 我们要学会封装 


let  tabrBarList=[
  {
    title: '首页',
    icon: 'icon-ind',
    path: '/home/index'
  },
  {
    title: '新闻',
    icon: 'icon-mess',
    path: '/home/news'
  },
  {
    title: '找房',
    icon: 'icon-house',
    path: '/home/house'
  },
  {
    title: '我的',
    icon: 'icon-my',
    path: '/home/my'
  }


]




export default class HomeIndex extends Component {
    constructor(props) {
        super(props);
        this.state = {
          selectedTab: 'blueTab', //切换高亮
        //   hidden: false, // 显示与隐藏tabbar
        //   fullScreen: false,  // 全屏显示  

        };
      }


      componentDidMount() {
          console.log(this.props.location.pathname)
          // 一进入到页面进行高亮显示
          this.setState({
            selectedTab:this.props.location.pathname
          })

      }




      renderContent(pageText) {
        return (
          <div style={{ backgroundColor: 'white', height: '100%', textAlign: 'center' }}>
          
               我是渲染的内容+ {pageText}
           
          </div>
        );
      }


      renderTabBar() {
          return (
           tabrBarList.map(v=>( <TabBar.Item
            title={v.title}
            key={v.title}
    
           icon={
               <i className={`iconfont   ${v.icon}`}></i>
           }
            selectedIcon={
                <i className={`iconfont   ${v.icon}`}></i>
            }  

            selected={this.state.selectedTab === v.path}
           
            onPress={() => {
              

                this.props.history.push(v.path) //编程式路由跳转
              this.setState({
                selectedTab: this.props.location.pathname
              });
            }}
          
          >


            {/* {this.renderContent('Life')} */}
          </TabBar.Item>))
          )
      }




    render() {
        return (
            <div   style={{height:'100%'}}>
                {/*  路由设置 */}
               <HomeRouter></HomeRouter>
               



                    <div style={{ position: 'fixed',  width: '100%',bottom:0 } }>
                    <TabBar  


                    // tabBarPosition='bottom'
                    noRenderContent={true}
                    unselectedTintColor="#888" // 	未选中的字体颜色
                    tintColor="green" // 选中字体的颜色
                    barTintColor="white" //  tabbar 的背景颜色
                    //   hidden={this.state.hidden} // 显示与隐藏 tabbar 
                    >

                        {this.renderTabBar()}
                    
                    
                
                    </TabBar>
                </div>

                 
            </div>
        )
    }
}









